<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: url("images/bg.jpg");
            }
            @font-face {font-family: 'iconfont';
                src: url("iconfont/iconfont.eot"); /* IE9*/
                src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
                url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
            }
            .iconfont{
                font-family:"iconfont" !important;
                font-size: 1.5rem;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -webkit-text-stroke-width: 0.2px;
                -moz-osx-font-smoothing: grayscale;
                color: #fff;
            }
            header{
                width: 10rem;
                height: 2rem;
                text-align: center;
                color: #fff;
            }
            header h3{
                font-size: 0.5rem;
                line-height: 1.3rem;
            }
            header p{
                font-size: 0.3rem;
            }
            .singer{
                width: 8rem;
                height: 8rem;
                border: 1px solid #fff;
                margin: auto;
                border-radius: 50%;
            }
            .singer div{
                width: 7.6rem;
                height: 7.6rem;
                background: rgba(255,255,255,0.5);
                border-radius: 50%;
                margin: 0.2rem;
            }
            .singer div img{
                width: 7rem;
                height: 7rem;
                border-radius: 50%;
                margin: 0.3rem;
            }
            .progress{
                width: 9rem;
                height: 0.1rem;
                background:#ccc ;
                margin: 1rem auto;
            }
            .bg{
                width: 0px;
                height: 0.1rem;
                background: #0f9;
            }
            .bar{
                width: 0.2rem;
                height: 0.2rem;
                background: #fff;
                border-radius:50%;
                transform: translate(0rem,-0.15rem);
            }
            .btn{
                width: 8rem;
                margin: auto;
            }
            .btn div{
                float: left;
                margin: 0.5rem;
            }
            .pause{
                display: none;
            }
        </style>
    </head>
    <body>
        <header>
            <h3>爱不可及</h3>
            <p>王菲</p>
        </header>
        <section class="singer">
            <div>
                <img src="images/tx.jpg">
            </div>
        </section>
        <section class="progress">
            <div class="bg"></div>
            <div class="bar"></div>
        </section>
        <section class="btn">
            <div class="prev iconfont">&#xe6de;</div>
            <div class="play iconfont">&#xe60d;</div>
            <div class="pause iconfont">&#xe6ad;</div>
            <div class="next iconfont">&#xe6dd;</div>
        </section>
        <audio src="mp3/王菲-爱不可及.mp3" id="myMusic"></audio>
        <script type="text/javascript">
            var myMusic = document.getElementById("myMusic");
            var oPlay = document.getElementsByName("play")[0];
            var oPause = document.getElementsByName("pause")[0];
            var oProgress = document.getElementsByClassName("progress")[0];
            var oBar = document.getElementsByClassName("bar")[0];
            var oBg = document.getElementsByClassName("bg")[0];
            oPlay.onclick = function () {
                    myMusic.play();
                    oPause.style.display = "block";
                    this.style.display = "none";
            }
            oPause.onclick = function () {
                myMusic.play();
                oPause.style.display = "block";
                this.style.display = "none";
            }
           var w = oProgress.offsetWidth-oBar.offsetWidth;
            myMusic.addEventListener("timeupdate",function () {
                var s = this.currentTime/this.duration;
                oBar.style.transform = "translate("+s*w+"px,-0.15rem)";
                oBg.style.width = s*w+"px";
            });
            oBar.addEventListener("touchstart",function (e) {
                        var x = e.changedTouches[0].pageX;
                        var l = oBar.offsetLeft;
                        document.addEventListener("touchmove",function (e) {
                            var x1 = e.changedTouches[0].pageX;
                            var _left = x1 - x +l;
                            if(_left < 0){
                                _left = 0;
                            }else if(_left > w){
                                _left = w;
                            }
                            oBar.style.transform = "translate("+_left+"px,-.15rem)";
                            oBg.style.width= _left + "px";
                        });
                        document.addEventListener("touchend",function () {
                            document.removeEventListener("touchmove")
                        })
            });
            function move(e){
                var x1 = e.changedTouches[0].pageX;
                var _left = x1 - x +l;
                if(_left < 0){
                    _left = 0;
                }else if(_left > w){
                    _left = w;
                }
                oBar.style.transform = "translate("+_left+"px,-.15rem)";
                oBg.style.width= _left + "px";
            };
        </script>
    </body>
</html>